<template>
  <view
    v-if="goodsInfo"
    class="goods-detail"
  >
    <!-- 1 轮播图 -->
    <u-swiper
      :list="goodsInfo.pics"
      name="pics_big"
      :height="500"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
    ></u-swiper>

    <!-- 2 价格和名称 -->
    <view class="goods-info u-p-20">
      <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
      <view class="goods-name u-line-2"> lorem {{goodsInfo.goods_name}}</view>
    </view>
    <u-line color="#eee" />
    <u-line color="#eee" />
    <u-line color="#eee" />
    <u-line color="#eee" />
    <u-line color="#eee" />
    <u-line color="#eee" />

    <!-- 3 图文详情 -->
    <view class="goods-detail-wrap">
      <view class="title u-text-center u-m-10 u-font-30">图文详情</view>
      <!-- vue中用法 uniapp不建议   -->
      <!-- <view v-html="goodsInfo.goods_introduce"></view> -->
      <!-- 小程序中  更加简单的场景 -->
      <!-- <rich-text :nodes="goodsInfo.goods_introduce"></rich-text> -->
      <!-- uview 文章详情 图文详情 -->
      <u-parse :html="goodsInfo.goods_introduce"></u-parse>
    </view>

    <!-- 4 提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator
          open-type="switchTab"
          url="/pages/cart/cart"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="totalCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view
          class="cart btn u-line-1"
          @click="handlePush"
        >加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 商品详情信息
      goodsInfo: null,
    };
  },
  computed: {
    ...mapState(["cartList"]),
    // 总商品数量
    totalCount() {
      // reduce
      return this.cartList.reduce((sum, goods) => (sum += goods.num), 0);
    },
  },
  // async onLoad({ goods_id = 43984 }) {
  async onLoad(option) {
    // 解构同时 给它默认值
    const { goods_id = 43984 } = option;
    const res = await this.$u.get("/goods/detail", { goods_id });
    this.goodsInfo = res.message;
  },
  methods: {
    // 点击轮播图放大预览
    handlePreviewImage(index) {
      // 构造 预览图片要的参数 urls 图片地址数组
      const urls = this.goodsInfo.pics.map((pic) => pic.pics_big);
      // 想要即时显示图片路径
      const current = urls[index];
      //  调用小程序中的api 全屏预览 图片
      uni.previewImage({ urls, current });
    },
    // 点击加入购物车
    handlePush() {
      /* 
      1 如果该商品以前没有添加过  直接给数组 push添加一种商品即可
        this.goodsInfo.goods_id 
        购物车数组还没有获取 vuex
      2 如果该商品已经存在于购物车中，  修改该商品的购买数量
       */

      // 1 先判断一下当前商品id是否存在于 购物车数组中  findIndex
      const index = this.cartList.findIndex(
        (goods) => this.goodsInfo.goods_id === goods.goods_id
      );
      const newList = [...this.cartList];
      //  不存在
      if (index === -1) {
        // 数组中添加一个元素
        newList.push({
          ...this.goodsInfo, //id
          checked: true, // 选中状态
          num: 1, // 购买数量
        });
      } else {
        // 找到 修改元素 数量
        newList[index].num++;
      }

      // 3 修改到 vuex 调用mutations
      this.$store.commit("setCartList", newList);
    },
  },
};
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 102rpx;
}
.goods-info {
  .goods-price {
    color: $themeColor;
  }
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  /* 块级元素添加了两个定位 绝对|固定 行内块（宽带由内容撑开） */
  width: 100%;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>